<template>
  <div id="article">
    <div class="left"></div>
    <div class="center">
      <div class="title-part">
        {{articleWrapper.title}}
      </div>
      <div class="description-part">
        <div class="info">
          <span class="authorname">
            <a>
              {{articleWrapper.postStaff.name}}
            </a>
          </span>
          发布于
          <span class="time" style="margin-right: 20px">
            {{useDateToString(new Date(articleWrapper.createTime))}}
          </span>
          <span :key="i" v-for="(tag, i) in articleWrapper.tags" class="tags">
            <a-tag>{{tag}}</a-tag>
          </span>
        </div>
      </div>
      <div class="content-part">
        <v-md-preview 
        :text="articleContent"></v-md-preview>
      </div>
      <div class="bottom-part">
        <p class="licenses">本文章由 <a>@{{articleWrapper.postStaff.name}}</a>发表在DogeAdmin，遵循<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC-BY-NC-SA 4.0协议</a>，署名权由作者所有，任何形式的转发、演绎需要注明原作者！</p>
        <PulishedThingOperationsBar
          :reply-count="articleWrapper.replyCount"
          :like-count="articleWrapper.likeCount"
          :dose-i-liked-it="articleWrapper.doseILikedIt"
          @like-clicked="handleLikeArticle(articleWrapper)"
          @unlike-clicked="handleUnlikeArticle(articleWrapper)"
          @reply-clicked="() => {currentReplyReplyId = null;openReplyModal(articleWrapper)}"
        ></PulishedThingOperationsBar>

        <h3 style="margin: 20px">评论</h3>
        <ReplyComponent
          :key="reply.id"
          v-for="reply in replyList"
          :avater="reply.postStaff.avater"
          :name="reply.postStaff.name"
          :message="reply.content"
          :like-count="reply.likeCount"
          :time="reply.createTime"
          :update-time="reply.createTime" 
          :reply-count="reply.replyCount"
          :dose-i-liked-it="reply.doseILikedIt"
          :parent-comment-poster-name="reply.parentReply ? reply.parentReply.postStaff.name : undefined"
          :parent-comment-message="reply.parentReply ? reply.parentReply.content : undefined"
          @like-reply="handleLikeReply(reply, ()=>{})"
          @unlike-reply="handleUnlikeReply(reply, () => {})"
          @delete-reply="handleDeleteReply(reply.id, getDeleteList(reply) , () => {}, () => {})"
          @open-reply-modal="() => { currentReplyReplyId = reply.id;openReplyModal(articleWrapper); }"
        ></ReplyComponent>
        <HoverToLoadingComponent :is-fetching-list="isFetchingList" :no-more="noMore" @on-hover="fetch(articleWrapper.id)"></HoverToLoadingComponent>

      </div>
      <div class="reply-part"></div>
    </div>
    <div class="right"></div>
    <a-modal v-model:visible="isReplyModalShow" title="发布回复" :footer="null">
      <SendPostOrReplyComponent :has-operations-bar="false" place-holder="发布回复..." @on-post="({message}) => handlePostReply(currentReplyReplyId, message)"></SendPostOrReplyComponent>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import useArticleApi from '@/composable/article-api';
import { message } from 'ant-design-vue';
import useDateToString from '@composable/useDateToString';
import 'ant-design-vue/es/message/style/css';
import PulishedThingOperationsBar from '@/components/public/PulishedThingOperationsBar.vue';
import useReplyApi from '@/composable/reply-api';

const props = defineProps({
  article: Object
});

const articleWrapper = ref(props.article);

const articleContent = ref('正在加载文章内容...');
const replyList = ref([]);
const currentReplyReplyId = ref(null);

const { openReplyModal, isReplyModalShow, handlePostReply, fetch, isFetchingList, noMore, handleDeleteReply, handleLikeReply, handleUnlikeReply } = useReplyApi(replyList, '/articlereply');
const { findOneContent, handleLikeArticle, handleUnlikeArticle } = useArticleApi(() => {});


onMounted(() => {
  findOneContent(articleWrapper.value.id, c => articleContent.value = c, e => message.error(`出现错误：${e}`));
  fetch(articleWrapper.value.id);
});

const getDeleteList = (reply) => {
  if (reply.parentReply) return [articleWrapper.value, reply.parentReply]
  else return [articleWrapper.value]
}
</script>

<style scoped>
#article {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px 40px;
}
.title-part {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 20px;
}
.licenses {
  background-color: #f0f0f0;
  padding: 10px;
  border-left: red 4px solid;
  border-radius: 2px;
  
}
.description-part {
  font-size: 0.8em;
  padding: 0 10px;
}
</style>

<style>
.github-markdown-body {
  font-size: 14px!important;
  padding: 10px!important;
}
h1 {
  font-size: 2em!important;
}
h2 {
  font-size: 1.6em!important;
}

h3 {
  font-size: 1.4em!important;
}

h4 {
  font-size: 1.2em!important;
}

h5, h6 {
  font-size: 1em!important;
}
</style>